<template>
    <div class="b-body">
    <div class="b-el-main">
        <h3 class="title">Browse</h3>
        <div class="head">
            <el-input v-model="nodeName" class="input" placeholder="Enter your CPM keywords" suffix-icon="el-icon-search"></el-input>
        </div>
        <div class="menu">
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect" :default-active="selectType">
                <el-menu-item index="中药材">中药材</el-menu-item>
                <el-menu-item index="中药组方">中药组方</el-menu-item>
                <el-menu-item index="化合物">化合物</el-menu-item>
                <el-menu-item index="来源植物名">来源植物名</el-menu-item>
                <el-menu-item index="靶点">靶点</el-menu-item>
                <el-menu-item index="疾病">疾病</el-menu-item>
            </el-menu>
        </div>
        <el-table class="el-table"
            :data="tableData"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            @row-click="getDetail">
            <el-table-column
                :prop="tableTitle[0]"
                :label="tableTitle[0]"
                width="180">
            </el-table-column>
            <el-table-column
                :prop="tableTitle[1]"
                :label="tableTitle[1]"
                width="180">
            </el-table-column>
            <el-table-column
                :prop="tableTitle[2]"
                :label="tableTitle[2]"
                width="180">
            </el-table-column>
            <el-table-column
                :prop="tableTitle[3]"
                :label="tableTitle[3]"
                >
            </el-table-column>
        </el-table>
            <div class="block">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,20]"
                :page-size="pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      nodeName:'',
      selectType:'中药材',
      nodeList: [],
      currentPage:1,
      total:0,
      pageSize:10,
      tableTitle:['ID','name','拼音名称','拉丁名'],
      tableData: [{
            ID: 'herb00210',
            name: '羌活',
            拼音名称: 'Qianghuo',
            拉丁名:'Notopterygii Rhizomaet Radix'
          }]
    }
  },
  methods: {
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
        this.getTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getTableData()
      },
    getTableData() {
        const allData = this.$route.query.nodeList
        this.tableTitle = this.$route.query.keyList
        this.nodeName = this.$route.query.nodeName
        this.selectType = this.$route.query.selectType
        console.log('tableTitle:',this.tableTitle)
        this.tableData = allData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.pageSize * this.currentPage
      );
        this.total = allData.length
    },
    getDetail(e) {
        let Id = null
        if (this.selectType == "疾病"){
             Id = e.id
        }
        else{
            Id = e.ID
        }
            
        this.$router.push({path:'/message',query: {ID:Id,selectType:this.selectType}})
    }
  },
  mounted() {
    this.getTableData()
  }
}
</script>

<style lang="scss">
    .b-body{
        background-color: white;
        .b-el-main{
            // width: 90%;
            // height: 500px !important;
            margin: 20px auto;
            background-color: white;
            .block {
                float: right;
                margin-top: 30px;
                margin-right: 30px;
            }
            .title{
                text-align: left;
                margin-left: 30px;
                position: relative;
            }
            .head {
                height: 60PX;
                margin-top: 10px;
                text-align: left;

            }
            .el-input {
                    width: 300px;
                    float: left;
                    margin-left: 30px;
            }
            .menu {
                height: 80px;
                margin-left: 30px;
                margin-right: 30px;
                margin-top: 20px;
            }   
            .el-table{
                margin-left: 30px;
                margin-right: 30px;
                width: auto;
            }
        }
    }
        
</style>